<div class="grid">
    <div class="col-12 lg:col-6">
        <div class="card">
            <h2>System</h2>
            <table *ngIf="info$ | async as info">
                <tr>
                    <td>Model:</td>
                    <td>{{info.ASICModel}}</td>
                </tr>
                <tr>
                    <td>Uptime:</td>
                    <td>{{info.uptimeSeconds | dateAgo}}</td>
                </tr>
                <tr>
                    <td>Wi-Fi Status:</td>
                    <td>{{info.wifiStatus}}</td>
                </tr>
                <tr>
                    <td>Wi-Fi RSSI:</td>
                    <td class="inline" [ngClass]="{
                        'text-green-500': info.wifiRSSI > -50,
                        'text-blue-500': info.wifiRSSI <= -50 && info.wifiRSSI > -60,
                        'text-orange-500': info.wifiRSSI <= -60 && info.wifiRSSI > -70,
                        'text-red-500': info.wifiRSSI <= -70
                    }" pTooltip="{{
                        info.wifiRSSI > -50 ? 'Excellent' :
                        (info.wifiRSSI <= -50 && info.wifiRSSI > -60 ? 'Good' :
                        (info.wifiRSSI <= -60 && info.wifiRSSI > -70 ? 'Fair' : 'Weak'))
                    }}" tooltipPosition="bottom">
                        {{info.wifiRSSI}} dBm
                    </td>
                </tr>
                <tr>
                    <td>MAC Address:</td>
                    <td>{{info.macAddr}}</td>
                </tr>
                <tr>
                    <td>Free Heap Memory:</td>
                    <td>{{info.freeHeap}}</td>
                </tr>
                <tr>
                    <td>Version:</td>
                    <td>{{info.version}}</td>
                </tr>
                <tr>
                    <td>ESP-IDF Version:</td>
                    <td>{{info.idfVersion}}</td>
                </tr>
                <tr>
                    <td>Board Version:</td>
                    <td>{{info.boardVersion}}</td>
                </tr>
            </table>
        </div>
    </div>
</div>
